<template>
  <el-popover placement="top-start" width="200" trigger="hover">
    <div>
      <el-row v-for="(item, index) in displayDatas" :key="index">
        <el-col :span="10"
          ><span>{{ item.currencyCode }}</span></el-col
        >
        <el-col :span="14"
          ><div style="text-align: right">{{ item[field] | money }}</div></el-col
        >
      </el-row>
    </div>
    <div slot="reference">
      <div style="text-align: right">{{ getTotalAmount() }}</div>
    </div>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    getTotalAmount() {
      if (!this.field || !this.items) return "";

      //取综合本位币
      let matchs = this.items.filter(
        (x) => !x.currencyId && !x.dimensionGroupValueId
      );

      if (!matchs || matchs.length == 0) return "";

      let amount = matchs[0][this.field];

      return amount ? amount.toMoney() : "";
    },
  },
  computed: {
    displayDatas() {
      return this.items.filter((x) => x.currencyId && !x.dimensionGroupValueId);
    },
  },
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    field: {
      type: String,
      default: "",
    },
  },
};
</script>

<style scoped></style>
